<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除默认样式 */
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .list{
            width: 300px;
            height: 300px;
            margin: 150px auto;
            transform: rotate(0deg);
        }
        li{
            width: 150px;
            height: 150px;
            background-color: aqua;
            float: left;
        }
        li:first-child,
        li:last-child{
            border-radius:0px 200px 0px 200px ;
        }
        li:nth-child(2),
        li:nth-child(3){
            border-radius: 200px 0 200px 0;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <button id="rotateBtn">转</button>
    <button id="stopBtn">停</button>
   <script>
       console.log(rotateBtn)
       var list=document.querySelector('.list')
       var rotateBtn = document.querySelector('#rotateBtn');
        var stopBtn = document.querySelector('#stopBtn');
       var num=0
       var timer
       rotateBtn.onclick=function() {
           //转起 循环定时器走了
           timer=setInterval(function(){
               num++
               list.style.transform ='rotate('+num +'deg)'
           },30)
       }

       //停止定时器清除了
       stopBtn.onclick =function () {
           clearInterval(timer)
       }
   </script>
</body>
</html>